<template>
  <div
    class="gis-layout"
    :class="{ 'hide-left': !$slots.left || hide.left, 'hide-right': !$slots.right || hide.right }"
  >
    <div v-if="$slots.left" class="gis-layout-side-left" :class="{ 'hide-left': hide.left }" :style="sideStyle">
      <slot name="left" />
    </div>
    <div
      v-if="$slots.leftPendant"
      class="layout-side-left-pendant"
      :class="{ 'hide-left-pendant': hide.left }"
      :style="{ top: top }"
    >
      <slot name="leftPendant" />
    </div>
    <div
      v-if="$slots.center"
      class="gis-layout-side-center"
      :class="[centerClass, hide.center ? 'hide-center' : '']"
      :style="sideStyle"
    >
      <div class="gis-layout-box">
        <slot name="center" />
      </div>
    </div>
    <div v-if="$slots.customCenter" class="gis-layout-custom-center" :style="{ top: top }">
      <slot name="customCenter" />
    </div>
    <div v-if="$slots.right" class="gis-layout-side-right" :class="{ 'hide-right': hide.right }" :style="sideStyle">
      <slot name="right" />
    </div>
    <div
      v-if="$slots.rightPendant"
      class="layout-side-right-pendant"
      :class="{ 'hide-right-pendant': hide.right }"
      :style="{ top: top }"
    >
      <slot name="rightPendant" />
    </div>
    <div
      v-if="$slots.bottom"
      class="gis-layout-side-bottom"
      :style="sideBottomStyle"
      :class="{ 'hide-bottom': hide.bottom }"
    >
      <slot name="bottom" />
    </div>
    <slot v-if="showFullscreen" name="fullscreen">
      <gis-layout-fullscreen :style="fullscreenStyle" />
    </slot>
  </div>
</template>

<script>
import { useFullscreen } from '@vueuse/core';
import GisLayoutFullscreen from '../components/gis-layout-fullscreen/index.vue';

export default {
  name: 'gis-layout',
  components: { GisLayoutFullscreen },
  props: {
    top: { type: String, default: '105px' },
    width: { type: String, default: '546px' },
    fullscreen: { type: Boolean, default: false },
    showFullscreen: { type: Boolean, default: true },
    centerBottom: { type: Boolean, default: false }, //底部是否只占中间
    centerSize: {
      type: String,
      default: 'normal',
      validator: (v) => ['normal', 'large'].indexOf(v) >= 0,
    },
  },
  setup() {
    const { isFullscreen } = useFullscreen();
    return { isFullscreen };
  },
  computed: {
    fullscreenStyle() {
      return {
        bottom: this.$slots.bottom ? '360px' : '60px',
        right: this.isFullscreen ? 0 : this.width,
        marginRight: '40px',
      };
    },
    sideBottomStyle() {
      return this.centerBottom ? { left: this.width, right: this.width, margin: '0 40px' } : {};
    },
    sideStyle() {
      return {
        top: this.top,
        bottom: this.$slots.bottom && !this.centerBottom ? '320px' : '20px',
      };
    },
    hide() {
      const isFull = this.isFullscreen;
      return { left: isFull, center: isFull, right: isFull, bottom: isFull };
    },
    centerClass() {
      return 'gis-layout-side-center gis-layout-side-center-' + this.centerSize;
    },
  },
  watch: {
    $slots: {
      immediate: true,
      handler() {
        const style = {};
        if (!this.$slots.left && !this.$slots.right) {
          style.left = '20px';
        }
        if (this.$slots.bottom) {
          style.bottom = '320px';
        }
        this.$vbus.$emit('setMapFilterStyle', style);
      },
    },
  },
};
</script>

<style lang="less">
.gis-layout {
  @box-width: v-bind(width);
  .getGridBackgroundWidth(@negative) {
    @value: calc(@negative * 613 / 929 * 100vh);
  }

  .layout-grid-background {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: .getGridBackgroundWidth(0.7) [ @value];
    height: 100vh;
    margin: auto;
    user-select: none;
    pointer-events: none;
    transition: left ease 0.3s, right ease 0.3s;
  }

  width: 0;
  height: 0;
  overflow: hidden;
  &:before {
    .layout-grid-background();
    left: 0;
    background: url('../assets/nor_pic_bg_lc.png') top left no-repeat;
    background-size: 100% 100%;
  }
  &:after {
    .layout-grid-background();
    right: 0;
    transform: rotateY(180deg);
    background: url('../assets/nor_pic_bg_lc.png') top left no-repeat;
    background-size: 100% 100%;
  }
  &.hide-left:before {
    left: .getGridBackgroundWidth(-1) [ @value];
  }
  &.hide-right:after {
    right: .getGridBackgroundWidth(-1) [ @value];
  }
  .gis-layout-side-left,
  .gis-layout-side-center,
  .gis-layout-side-right {
    position: absolute;
    bottom: 20px;
    /* 修改这个宽度会影响左右两边看板里面的表格的分页显示,太窄分页会换行,
     * 目前430这个宽度能支持总条数那里显示到百万级
     */
    width: v-bind(width);
    height: auto;
    margin: auto;
    z-index: 10;
  }
  .gis-layout-side-left,
  .gis-layout-side-right {
    overflow: hidden auto;
    display: flex;
    flex-direction: column;
  }
  .gis-layout-side-left {
    left: 30px;
    transition: left ease 0.3s;
    &.hide-left {
      left: -100%;
    }
  }
  .gis-layout-side-center {
    margin: auto;
    padding-top: 30px;
    background: none;
    .gis-layout-box {
      position: relative;
      height: calc(100% - 15px);
      border: none;
      padding: 0;
      background: linear-gradient(180deg, rgba(39, 55, 72, 0.97), rgba(30, 42, 56, 0.97));
      box-shadow: 5px 3px 16px 2px rgba(11, 19, 27, 0.9);
    }
    &.gis-layout-side-center-normal {
      left: 0;
      right: 0;
      width: calc(100% - 1000px);
      min-width: calc(100% - 1000px);
      max-width: calc(100% - 1000px);
      padding: 30px 0 0;
    }
    &.gis-layout-side-center-large {
      left: unset;
      right: 30px;
      width: calc(100% - 530px);
      min-width: calc(100% - 530px);
      max-width: calc(100% - 530px);
      padding: 30px 0 0;
    }
  }
  .gis-layout-custom-center {
    position: absolute;
    left: calc(v-bind(width) + 30px);
    right: calc(v-bind(width) + 30px);
    z-index: 10;
    width: calc(100% - v-bind(width) - v-bind(width) - 60px); //两侧的宽度以及间距
    min-width: calc(100% - v-bind(width) - v-bind(width) - 60px);
    max-width: calc(100% - v-bind(width) - v-bind(width) - 60px);
  }
  .gis-layout-side-right {
    right: 30px;
    transition: right ease 0.3s;
    &.hide-right {
      right: -100%;
    }
  }
  .gis-layout-side-bottom {
    position: absolute;
    bottom: 0;
    left: 30px;
    right: 30px;
    height: 307px;
    margin: auto;
    padding-bottom: 20px;
    z-index: 10;
    background: url('../assets/nor_pic_bg_down.png') center top no-repeat;
    background-size: auto;
    transition: bottom ease 0.3s;
    &.hide-bottom {
      bottom: -100%;
    }
  }

  .layout-side-left-pendant,
  .layout-side-right-pendant {
    z-index: 10;
    position: absolute;
  }
  .layout-side-left-pendant {
    left: v-bind(width);
    margin-left: 50px;
  }
  .layout-side-right-pendant {
    right: v-bind(width);
    margin-right: 50px;
  }
}
</style>
